<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <!--引入第三方库 mitt -->
    <script src="../node_modules/mitt/dist/mitt.umd.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用兄弟1组件 -->
        <brother1></brother1>
        <!-- 使用兄弟2组件 -->
        <brother2></brother2>
    </div>
</body>

</html>
<script>
    // 兄弟组价传值
    // vue2: 有中央事件总线 const eventBus =  new Vue() 
    // vue3: 由于vue3 没有 Vue 构造函数了, 所以不能使用vue2写法

    // vue3 实现方式 模拟vue2 方式, 借助与第三方库 mitt 
    // 需要需要下载安装使用 npm  i mitt
    // 总结:  
    // 第一步: 创建发射器 const emitter = mitt()
    // 第二步: 在兄弟1 组件中通过事件处理函数 发射数据
    // 第三步: 在兄弟2 组件中生命周期函数中通过  emitter.on(自定义事件, (data)=>{data 就是数据})



    // console.log('mitt', mitt);

    // 创建一个发射器
    const emitter = mitt()


    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                count: 0
            }
        },
        components: {
            brother1: {
                template: `<p @click='emitFn'>兄弟1组件--{{smoke}}</p>`,
                data() {
                    return {
                        smoke: '中华'
                    }
                },
                methods: {
                    emitFn() {
                        // 将兄弟1 组件中的数据发射到兄弟2组件
                        // 语法: emitter.emit(自定义事件, 要传递的数据)
                        emitter.emit('myevent', this.smoke)
                    }
                },
                // mounted() {
                //     // 将兄弟1 组件中的数据发射到兄弟2组件
                //     // 语法: emitter.emit(自定义事件, 要传递的数据)
                //     console.log('兄弟1-created');
                //     emitter.emit('myevent', this.smoke)
                // }

            },
            brother2: {
                template: `<p>兄弟2组件--{{smoke2}}</p>`,
                data() {
                    return {
                        smoke2: '红梅'
                    }
                },
                mounted() {
                    // 接收兄弟1组件传递的数据
                    console.log('兄弟2-created');
                    emitter.on('myevent', (data => {
                        console.log('data', data);
                        this.smoke2 = data

                    }))
                }
            }
        }

    });

    //挂载根实例到根节点
    vm.mount('#app')

</script>